<template>
  <div class="left-chart-1">
    <div class="title cursorPointer">生产人效</div>
    <div class="wrap">
      <template v-if="!noData">
        <dv-scroll-board :config="config" class="lc1-chart" />
        <div class="lc1-details">
          <div class="chart-content">
            <CustomChart :option="option" :xAxisSelectable="false" />
            <div class="detail-text">
              <span>人效</span>
              <span
                :class="{
                  normal: groupUserEffeciency >= standardGroupUserEffeciency,
                }"
                >{{ toFix(groupUserEffeciency, 2) }}</span
              >
              <span>标准箱/小时</span>
              <span>标准人效：{{ toFix(standardGroupUserEffeciency, 2) }}</span>
            </div>
          </div>
          <div>
            当前班组：<span>{{ groupName }}</span>
          </div>
          <div>
            应到 / 实到：<span>{{ arriveCount }}人 / {{ signInCount }}人</span>
          </div>
          <!-- <div>
            实到：<span>{{ signInCount }}人</span>
          </div> -->
          <div>
            接班时间：<span>{{ workStartTime }}</span>
          </div>
        </div>
      </template>
      <div v-else class="no-data">暂无数据</div>
    </div>
  </div>
</template>

<script>
import CustomChart from "../../components/CustomChart";
import { getProducingGroupUserByOrderId } from "@/api/dashboard/blowIrriagtionSpinLineDaily";
export default {
  name: "LeftChart1",
  components: { CustomChart },
  props: {
    orderItem: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      standardGroupUserEffeciency: "",
      groupUserEffeciency: "",
      option: {
        series: [
          {
            type: "gauge",
            center: ["50%", "60%"],
            radius: "93%",
            startAngle: 200,
            endAngle: -20,
            min: 0,
            max: 60,
            splitNumber: 5,
            itemStyle: {
              color: "#FFAB91",
            },
            pointer: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                width: 15,
                color: [
                  [0, "#ff5050"],
                  [1, "#e6ebf8"],
                ],
              },
            },
            axisTick: {
              // distance: -30,
              // splitNumber: 5,
              length: 5,
              lineStyle: {
                width: 1,
                color: "rgba(255,255,255,0.8)",
              },
            },
            splitLine: {
              // distance: -12,
              length: 10,
              lineStyle: {
                width: 1,
                color: "rgba(255,255,255,0.8)",
              },
            },
            axisLabel: {
              distance: -35,
              color: "#ffffff",
              fontSize: 12,
            },
            anchor: {
              show: false,
            },
            title: {
              show: false,
            },
            detail: {
              show: false,
            },
            data: [
              {
                value: 0,
              },
            ],
          },
        ],
      },
      groupName: "",
      arriveCount: "",
      signInCount: "",
      workStartTime: "",
      config: {},
    };
  },
  computed: {
    noData() {
      return !this.orderItem;
    },
  },
  methods: {
    async getData() {
      if (!this.orderItem) {
        this.$emit("update-groupItem", null);
        this.config = {};
        return;
      }

      const param = {
        orderId: this.orderItem.id,
      };
      try {
        const res = await getProducingGroupUserByOrderId(param);

        // 工位人员列表
        let configdata = res?.data?.personDtos || [];
        configdata = configdata.map((ele) => [
          `<span class="text-wrap">${ele.workStationName}</span>`,
          `<span class="text-wrap">${ele.realname}</span>`,
        ]);

        this.config = {
          headerBGC: "#050f67",
          header: ["岗位/工位", "姓名"],
          data: configdata,
          index: false,
          rowNum: configdata.length > 7 ? 7 : configdata.length,
          columnWidth: [130, 170],
          align: ["center", "center"],
          oddRowBGC: "#053a6d",
          evenRowBGC: "#091c56",
        };

        // 人效
        const _groupUserEffeciency = res?.data?.groupUserEffeciency || 0;
        const _standardGroupUserEffeciency =
          res?.data?.standardGroupUserEffeciency || 0;
        const max = this.getMax(
          Math.max(_groupUserEffeciency, _standardGroupUserEffeciency)
        );
        this.option.series[0].data[0].value = _groupUserEffeciency;
        this.option.series[0].axisLine.lineStyle.color[0][0] =
          _groupUserEffeciency / max;
        this.option.series[0].axisLine.lineStyle.color[0][1] =
          _groupUserEffeciency < _standardGroupUserEffeciency
            ? "#ff5050"
            : "#74d047";
        this.option.series[0].max = max;
        this.groupUserEffeciency = _groupUserEffeciency;
        this.standardGroupUserEffeciency = _standardGroupUserEffeciency;

        // 班组班次相关信息
        this.groupName = res?.data?.groupName || "";
        this.arriveCount = res?.data?.arriveCount || "";
        this.signInCount = res?.data?.signInCount || "";
        this.workStartTime = res?.data?.workStartTime || "";
        this.$emit("update-groupItem", {
          startTime: res?.data?.startTime,
          endTime: res?.data?.endTime,
          groupCode: res?.data?.groupCode,
          groupId: res?.data?.groupId,
          groupName: res?.data?.groupName,
        });
      } catch (error) {
        this.config = {};
        this.$emit("update-groupItem", null);
        console.error(error);
      }
    },
    getMax(maxValue) {
      const maxValueLength = Math.ceil(maxValue).toString().length - 1;

      const baseNumber = Math.pow(10, maxValueLength) / 2;
      return Math.ceil(maxValue / baseNumber) * baseNumber;
    },
  },
  watch: {
    orderItem: {
      handler() {
        this.getData();
      },
      immediate: true,
    },
  },
};
</script>

<style lang="less" scoped>
.left-chart-1 {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .wrap {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 30px 35px;
  }
  .lc1-details {
    flex: 1;
    width: 50%;
    height: 100%;
    font-size: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .chart-content {
      height: 60%;
      position: relative;
      .detail-text {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        padding: 25% 0 8%;
        font-size: 16px;
        color: #dddddd;
        & > span:nth-child(2) {
          color: #ff5050;
          font-size: 26px;
          font-weight: 600;
          &.normal {
            color: #74d047;
          }
        }
        & > span:last-child {
          margin-top: 10px;
        }
      }
    }
  }

  .lc1-chart {
    flex: 1;
    width: 50%;
  }

  .group-user-effeciency {
    width: 100%;
    text-align: center;
    tr {
      background-color: rgb(9, 28, 86);
      &:first-child {
        font-size: 15px;
        background-color: rgb(5, 15, 103);
      }
    }

    td {
      padding: 2px;
      height: 35px;
    }

    .light {
      height: 45.56px;
      font-size: 18px;
      font-weight: 600;
      color: #ff5050;
    }
  }
  .small-text {
    font-size: 14px;
  }
}
::v-deep {
  .text-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    line-height: 17px;
    white-space: wrap;
  }
}
</style>
